<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.min.js"></script>
<script src="js/moment.min.js"></script>
<script type="text/javascript">
var currentDate=moment();
var curMonth=moment();
$(function(){		
	var arr=getAllDate(curMonth);	
	initDateLi(arr);
	
	$(".date-left").click(function(){
		curMonth.add("M",-1);
		var tmpArray=getAllDate(curMonth);
		initDateLi(tmpArray);
	});
	
	$(".date-right").click(function(){
		curMonth.add("M",1);
		var tmpArray=getAllDate(curMonth);
		initDateLi(tmpArray);
	});
	
	//周六，周日变红色
	$(".week li").each(function(i){
		if(i==0||i==6)
		{
			$(this).addClass("red");
		}
	})

})


//给出moment当前日期
function getAllDate(curdate)
{
	var dayArray=Array();//日期数组
	var firstDay=curdate.date(1);
	var firstWeek=firstDay.day();//一个月第一天星期几	
	
	if(firstWeek==0)firstWeek=7;
	
	//上个月的日期
	for(var i=0;i<firstWeek;i++)
	{		
		var tmpDay=firstDay.clone();
		tmpDay.add('days',i-firstWeek)
		var day=new Day(tmpDay,0);
		dayArray.push(day);
	}
	
	//当月的日期
	var tmpDay1=firstDay.clone();//第一天
	var tmpDay2=firstDay.clone();//最后一天
	tmpDay2.add('M',1).date(0);
	var curDays=tmpDay2.date();//当月总天数
	
	for(var i=0;i<curDays;i++)
	{	
		if(i>0)
		{
			tmpDay1.add('days',1);
		}
		
		var day=null;
		if(tmpDay1.diff(currentDate,'days')==0)
		{
			var day=new Day(tmpDay1,2);
		}
		else
		{
			var day=new Day(tmpDay1,1);
		}
		dayArray.push(day);
	}
	
	//下个月的日期
	for(var i=0;i<42-firstWeek-curDays;i++)
	{		
		tmpDay2.add('days',1)
		var day=new Day(tmpDay2,3);
		dayArray.push(day);
	}

	return dayArray;
}


//日期对象2014-06-30
function Day(curdate,type)
{
	this.week=curdate.days();//星期
	this.daynum=curdate.date();
	this.curdate=curdate.format('YYYY-MM-DD');//当前日期
	this.type=type;//0为上一个月的日期，1为这个月的日期,2为当天日期,3为下一个月的日期
}

function initDateLi(arr)
{
	$("#week-date-li").html('');
	$.each(arr,function(i,n){
		var c=' class="';
		if(n.type==0||n.type==3)
		{
			c+='gray';
		}
		else if(n.type==2)
		{
			c+='cur-bg';
		}
		//如果日期为周六，或者周日,变红色
		if((n.week==0||n.week==6)&&n.type==1)
		{
			c+=' red';
		}
		
		$("#week-date-li").append('<li dd="'+n.curdate+'"'+c+'">'+n.daynum+'</li>');
	});	
	
	var liWidth=parseInt($(window).width()*0.9/7)+1;//边框线
	var boxWidth=liWidth*7+1;
	$(".alert-date-box").css("width",boxWidth);	
	
	
	$(".alert-date-box .alert-title").html(curMonth.format("YYYY-MM"));
	$(".alert-date-box .week li,.alert-date-box .week-date li").css("width",liWidth);
	//鼠标放上去背景变色
	$(".week-date li").hover(function(){
		//不为当上个月下个月并且不为当天时期
		if(!$(this).is('.gray')&&!$(this).is('.cur-bg'))
			$(this).addClass('bg-color');
		},function(){$(this).removeClass('bg-color');});
}
</script>
</head>
<body>
<div class="alert-date-box">
	<div class="alert-head">
    <div class="date-left"></div>
<span class="alert-title"></span>
<div class="date-right"></div>
<div class="clear"></div>
</div>
  <div class="week">
  <ul>
  <li>日</li>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
  </ul>
  <div class="clear"></div>
  </div>
  <div class="week-date">
  <ul id="week-date-li">
  <li class="gray">28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  </ul>
  <div class="clear"></div>
  </div>
</div>
</body>
</html>
